/**
* Vista asociada al contenido 
* del tab de la funcionalidad GEOLOCALIZACION
* en el aplicativo.
*/
Ext.define("entgpv11.view.details.UsgsMap", {
    extend: 'Ext.Container',
    alias: 'widget.usgsmap',
    config:
    {
        layout: 'vbox',
        record: null,
        mapMarkersArray: [],  //global variable used to manage map markers
        mapMarkersGlobalArray: [],
        idMarkersGlobalArray: [],
        pointMarker: {}

    },
    initialize: function () {
        this.callParent(arguments);
        this.add([
                {
                    xtype: 'toolbar',
                    docked: 'top',
                    ui: 'sub',
                    title: 'Referencia Geogr&#225;fica',
                    items: [
                    
                          {
                              xtype: "button",
                              id: "myTrafficButton",
                              iconMask: true,
                              pressed: true,
                              iconCls: 'maps',
                              badgeText: '0',
                              handler: this.onTrafficButtonTap,
                              scope: this
                          },
                          {
                              xtype: "button",
                              id: "myTrackingButton",
                              iconMask: true,
                              iconCls: 'locate',
                              handler: this.onTrackingButtonTap,
                              scope: this
                          },
                          { xtype: 'spacer' }
                     
                   ]

            },
            {
                id: 'content',
                tpl: [
                    '<div class="x-list-container"><div class="x-list-item x-list-header-item"></div>',
                    '<div class="x-list-item">',
                        '<div class="x-list-item-label">',
                         '<div class="list-item-title"><center><span>{Nombre}</span></center></div>',
                          '<div class="list-item-narrative"></div>',
                        '</div>',
                    '</div><div class="x-list-item x-list-header-item"></div>',
                     '</div><br></br>'
                ].join('')
            },
            {
                xtype: 'map',
                flex: 1,
                mapOptions: {
                    zoomControl: true,
                    panControl: false,
                    rotateControl: false,
                    streetViewControl: false,
                    mapTypeControl: false,
                    zoom: 13
                }
            }
        ]);

    },
    addMarker: function (record) {
        try {

            var data = record.data;
            var numberFixed = {
                'lat': Ext.Number.toFixed(data.Latitud, 6),
                'lng': Ext.Number.toFixed(data.Longitud, 6)
            };
            var desc = '<div>' + data.Nombre + '<br/> Latitud ' + data.Latitud + ',Longitud ' + data.Longitud + '</div>';

            var infoWindow = null;
            var point = null;
            var marker = null;
            var map = this.down('map').getMap(); //this.getMap()
            this.deleteOverlaysGlobal();

            point = new google.maps.LatLng(numberFixed.lat, numberFixed.lng);
            this.setPointMarker(point);
            marker = new google.maps.Marker({
                map: map,
                position: point,
                icon: 'resources/images/map/more.png'
            });
            this._setMarkersArray(marker);
            this._setMarkersArray(marker, true, data.Id);
            infoWindow = new google.maps.InfoWindow();
            infoWindow.setContent(desc);
            //map.setCenter(point); // Center your map
            this.down('#content').setData(data);
            this.down('#content').setHidden(false);
            //map.onRemove()
            this.down('map').setMapCenter({
                latitude: numberFixed.lat,
                longitude: numberFixed.lng
            });
            google.maps.event.addListener(marker, "click", function () {
                infoWindow.open(map, marker);
            });
            setTimeout(function () {
                map.panTo(point);
            }, 1000);
        }
        catch (ex) {
            APP_GLOBAL.SetLog(' addMarker::' + ex);
        }
    },
    _getMarkersArray: function () {
        var markersArray = [];
        if (this._mapMarkersArray)
            markersArray = this.getMapMarkersArray();
        return markersArray;
    },
    _setMarkersArray: function (marker, ifGlobal, id) {
        var addGlobal = false;
        var idArray = 0;
        if (ifGlobal != undefined)
            addGlobal = ifGlobal;
        if (id != undefined)
            idArray = id;
        if (addGlobal) {

            if (this._mapMarkersGlobalArray) {
                if (idArray in this._idMarkersGlobalArray == false) {
                    this._idMarkersGlobalArray[idArray] = marker;
                    this._mapMarkersGlobalArray.push(marker);
                }

            }

        }
        else {
            if (this._mapMarkersArray)
                this._mapMarkersArray.push(marker);
            //this.setMapMarkersArray(marker);
        }
    },
    // Deletes all markers in the array by removing references to them
    deleteOverlays: function (arrayTmp) {
        var markersArray = [];
        var deleteArray = true;
        if (arrayTmp == undefined) {
            markersArray = this._getMarkersArray();
        }
        else {
            markersArray = arrayTmp;
            deleteArray = false;
        }
        for (i in markersArray) {
            if (typeof markersArray[i].setMap == 'function')
                markersArray[i].setMap(null);
        }
        if (deleteArray)
            markersArray.length = 0;

    },
    getCountMarkersGlobal: function () {
        var markersArray = this.getMapMarkersGlobalArray();
        var n = markersArray.length;
        var btnNum1 = this.down('button'), btnNum2 = Ext.getCmp('myTrackingButton');
        if (n > 1) {
            btnNum1.setBadgeText(n);
            btnNum1.setHidden(false);
            btnNum2.setHidden(false);
        }
        else {
            btnNum1.setHidden(true);
            btnNum2.setHidden(true);
        }
        return (n);
    },
    eraseMarkersGlobal: function () {
        this.deleteOverlaysGlobal();
        this._idMarkersGlobalArray = [];
        this._mapMarkersGlobalArray = [];
    },
    deleteOverlaysGlobal: function () {
        var markersArray = this.getMapMarkersGlobalArray();
        this.deleteOverlays(markersArray);
    },
    equalsMarker: function (x, y) {

        return (x.$a == y.$a && x.ab == y.ab);

    },
    showGlobalOverlays: function () {
        var markersArray = this.getMapMarkersGlobalArray();
        var map = this.down('map').getMap(); //this.getMap()
        this.deleteOverlaysGlobal();
        this.down('#content').setHidden(true);
        if (markersArray) {
            for (i in markersArray) {
                if (this.equalsMarker(this.getPointMarker(), markersArray[i].position))
                    markersArray[i].icon = 'resources/images/map/point.png';
                else
                    markersArray[i].icon = 'resources/images/map/more.png';
                markersArray[i].setMap(map);
            }
        }
    },
    onTrackingButtonTap: function () {
        this.fireEvent("trackingButtonTapCommand", this);
       
    },
    onTrafficButtonTap: function () {
        this.fireEvent("trafficButtonTapCommand", this);
       
    }


});

